<template>
  <el-table style="width: 100%" height="250"
    ref="gridDom"
    :data="dataList"
    highlight-current-row
    @current-change="handleCurrentChange"
  >
    <el-table-column label="触发" prop="trigger" width="60" />
    <el-table-column label="消息" prop="message" />
    <el-table-column label="规则">
      <template #default="scope">
        <span v-if="(scope.row.required)">
          必填！
        </span>
        <span v-if="(scope.row.min)">
          范围：{{scope.row.min}} - {{scope.row.max}}<br>
        </span>
        <span v-if="(scope.row.type)">
          类型：{{scope.row.type}}<br>
        </span>
        <span v-if="(scope.row.len)">
          长度：{{scope.row.len}}<br>
        </span>
        <span v-if="(scope.row.pattern)">
          正则：{{scope.row.pattern}}<br>
        </span>
      </template>
    </el-table-column>
    <el-table-column label="" width="50">
      <template #default="scope"> 
        <circle-close-filled @click.stop="delRule(scope.$index)" style="width: 1.0em; height: 1.0em; " />
      </template>
    </el-table-column>
  </el-table>
  <el-button @click="addNew">添加</el-button>

  <!--弹窗，添加规则-->
  <div v-dialog-drag="dialogInfo.width" >
    <el-dialog
      title="设置规则"
      v-model="dialogInfo.isShow"
      :modal="true"
      :width="dialogInfo.width"
      :close-on-click-modal="true"
      :destroy-on-close="true"
    >
      <el-scrollbar style="height:500px;margin: 2px;">
        <rule
          :ruleModel="ruleModel"
          :dialogInfo="dialogInfo"
          :events="events"
        >
        </rule>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>


<script>
  import { reactive, computed, ref } from 'vue'
  import { ElTable, ElTableColumn } from 'element-plus'
  import { CircleCloseFilled } from '@element-plus/icons-vue'

  import rule from '../base-item/rule.vue'

</script>

<script setup>

  const props = defineProps({
    formMeta: [Object],
    columnId: Number // 主控件
  })

  const { formMeta, itemMeta } = props.formMeta
  const { ruleMeta, colOrder } = props.formMeta.formMeta
  
  const gridDom = ref(null)

  // 把 meta 的 ruleMeta 转换成数组
  const dataList = computed(() => {
    return ( ruleMeta[props.columnId]) ?? []
  })

  // 弹窗信息
  const dialogInfo = reactive({
    isShow: false,
    state: 'add',
    width: '30%'
  })

  // 验证规则的 model
  const ruleModel = ref({})
  
  // 验证表单的事件
  const events = {
    add: () => {
      if (!Array.isArray(ruleMeta[props.columnId]))
        ruleMeta[props.columnId] = []
      
      // 判断是添加还是修改
      if (dialogInfo.state === 'add') {
        ruleMeta[props.columnId].push(ruleModel.value)
      } else {

      }

    }
  }

  const delRule = (index) => {
    console.log(index)
    ruleMeta[props.columnId].splice(index,1)
  }
 

  // 添加新规则
  const addNew = () => {
    dialogInfo.isShow = true
    dialogInfo.state = 'add'
    ruleModel.value = {}

    gridDom.value.setCurrentRow() // 设置单选

  }

  // 单选，用于修改
  const handleCurrentChange = (val) => {
    console.log(val)
    ruleModel.value = val
    dialogInfo.isShow = true
    dialogInfo.state = 'mod'

    setTimeout(() => {
      gridDom.value.setCurrentRow() // 设置单选
    }, 200)
  }

</script>
